{include file="index/_meta" /}
    <title>创建订单</title>
</head>
<body>
<div id="app">
    <van-nav-bar
            title="创建订单"
            left-text="返回"
            left-arrow
            @click-left="window.history.back();"
    ></van-nav-bar>

    <van-cell-group title="商品信息">
        <van-cell :title="goods.name"></van-cell>
        <van-cell title="规格" :value="sku"></van-cell>
        <van-cell title="购买数量">
            <template #right-icon>
                <van-stepper v-model="num" integer @change="stepperOnChange" :max="goods.limit_buy"></van-stepper>
            </template>
        </van-cell>
        <van-cell title="单价" :value="price"></van-cell>
    </van-cell-group>

    <van-radio-group v-model="express">
        <van-cell-group title="配送方式">
            <van-cell title="快递" clickable @click="addressShow=true,express = '1'">
                <template #right-icon>
                    <van-radio name="1"></van-radio>
                </template>
            </van-cell>
            <van-cell title="自取" clickable @click="addressShow=false,express = '2'">
                <template #right-icon>
                    <van-radio name="2" ></van-radio>
                </template>
            </van-cell>
        </van-cell-group>
    </van-radio-group>

    <div v-show="addressShow">
        <van-cell-group title="选择地址" >
            <div class="van-row" style="padding: 10px 16px;font-size: .8em;">
                <van-col span="24">
                    <van-col span="12">姓名：{{query.name}}</van-col>
                    <div class="van-col van-col--12" style="text-align: right;">
                        <van-button type="info" size="mini" @click="chooseAddress">选择地址</van-button>
                    </div>
                </van-col>
                <van-col span="24">电话：{{query.tel}}</van-col>
                <van-col span="24">地址：{{query.province}}{{query.city}}{{query.area}}{{query.addressDetail}}</van-col>
            </div>
        </van-cell-group>
    </div>

    <van-field style="margin-bottom: 50px;"
            v-model="query.remark"
            rows="2"
            autosize
            label="留言"
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
    ></van-field>

<!--    地址弹窗-->
    <van-popup v-model="popAddressShow" position="bottom" round closeable>

        <van-address-list
                v-model="chosenAddressId"
                :list="addressList"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
                @select="selectAddress"
                :style="{ height: '45%' }"
        ></van-address-list>

    </van-popup>

    <van-submit-bar
            :price="query.total_price"
            button-text="提交订单"
            :suffix-label="suffix_label"
            text-align="left"
            :safe-area-inset-bottom="yes"
            @submit="onSubmit"
    ></van-submit-bar>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                goods_id:"{$param.goods_id}",
                num:"{$param.num|default='0'}",
                price:"{$param.price|default='0'}",
                sku:'{$sku}',
                sku_id:'{$param.sku_id}',
                goods:{},
                express:'2',
                addressShow:false,
                addressList:[],
                query:{
                    name:'',
                    tel:'',
                    province:'',
                    city:'',
                    area:'',
                    addressDetail:'',
                    total_price:0,
                    remark:'',
                    share_id: "{$Think.get.share_id}",
                },
                chosenAddressId:0,
                disabledList:[],
                popAddressShow:false,
                yes:true,
                // 运费
                suffix_label:'',
            }
        },
        created() {

            this.getGoodsDetail()
            this.getDefaultHarvestAddress()
            this.getHarvestAddress()
            this.stepperOnChange()
        },
        methods: {
            getGoodsDetail(){
                let that = this
                axios.post("{:url('goods/getGoodsDetail')}",{
                    goods_id:that.goods_id,
                }).then(function (ret) {
                    that.goods = ret.data.data
                })
            },
            stepperOnChange(){
                let that = this
                that.query.total_price = that.price * that.num * 100
            },
            // 选择地址
            chooseAddress(){
                this.popAddressShow = true
            },
            // 获取地址列表
            getHarvestAddress(){
                let that = this
                axios.post("{:url('user/getHarvestAddress')}").then(function (ret) {
                    that.addressList = ret.data.data
                })
            },
            // 添加
            onAdd() {
                window.location.href = "{:url('user/address_create')}"
            },
            // 编辑
            onEdit(item) {
                window.location.href = "{:url('user/address_create')}?id="+item.id
            },
            // 选择地址
            selectAddress(item){
                this.query.name = item.name
                this.query.user_address_id = item.id
                this.query.tel = item.tel
                this.query.addressDetail = item.address
                this.query.address = item.address
                this.query.postalCode = item.postalCode
                this.query.province = item.province
                this.query.city = item.city
                this.query.county = item.county
                this.popAddressShow = false
            },
            // 获取默认地址
            getDefaultHarvestAddress(){
                let that = this
                axios.post("{:url('user/getDefaultUserAddress')}").then(function (ret) {
                    let item = ret.data.data
                    that.query.name = item.name
                    that.query.user_address_id = item.id
                    that.chosenAddressId = item.id
                    that.query.tel = item.tel
                    that.query.addressDetail = item.addressDetail
                    that.query.postalCode = item.postalCode
                    that.query.province = item.province
                    that.query.city = item.city
                    that.query.county = item.county
                })
            },
            // 订单提交
            onSubmit(){
                let that = this
                that.query.price = that.price
                that.query.express = that.express
                that.query.num = that.num
                that.query.goods_id = that.goods_id
                that.query.sku = that.sku
                that.query.sku_id = that.sku_id
                that.query.total_price = that.query.total_price / 100
                console.log(that.query)

                axios.post("{:url('order/createOrder')}",that.query).then(function (res) {
                    let ret = res.data
                    if (ret.code == 0){
                        vant.Notify({ type: 'success', message: ret.msg,duration:1000,onClose:function () {
                            that.buy(ret.data.jssdk,ret.data.order_id)
                            } });

                    }else{
                        vant.Notify({ type: 'danger', message: ret.msg,duration:1000 });
                    }
                })
            },
            buy(jssdk,order_id){
                wx.chooseWXPay({
                    timestamp:jssdk.timestamp,
                    nonceStr: jssdk.nonceStr,
                    package: jssdk.package,
                    signType: jssdk.signType,
                    paySign: jssdk.paySign,
                    success: function (res) {
                        // 支付成功后的回调函数
                        console.log(res)
                        vant.Notify({ type: 'success', message: '支付完成，正在跳转订单',duration:1000,onClose:function () {
                                window.location.href = "{:url('user/order_detail')}?order_id="+order_id
                            } });
                    }
                });
            },
        },
    })
</script>
</body>
</html>
